


Centering and Scaling Images

by KingOuija



Category: No Fandom, The Magnus Archives (Podcast)
Genre: Gen, formatting - Freeform, workskins
Language: English
Status: Completed
Published: 2019-08-10
Updated: 2019-08-10
Packaged: 2020-08-14 10:03:59
Rating: Not Rated
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 1
Words: 278
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/20190493
Author URL: https://archiveofourown.org/users/KingOuija/pseuds/KingOuija
Summary: Brief explanation of how to center and scale embedded images with workskins





	Centering and Scaling Images

With the caveat that I'm not a web designer and am new to ao3, and there might be tidier ways to do this, here's a barebones guide to getting embedded images scaled and centered. They should display properly on mobile, as well.

First, make yourself a workskin. On your dashboard, this option is on the left, fourth down.

Name it something descriptive. Copy this into the text field:

#workskin IMG.center { display: block; margin-left: auto; margin-right: auto; } #workskin IMG.scale { max-width: 85%; height: auto; } #workskin IMG.scale-center { max-width: 85%; height: auto; display: block; margin-left: auto; margin-right: auto; }

Save.

This creates three classes you can use while editing your work's html. "center" centers images. "scale" fits oversized images to 85% of your window's width. "scale-center" does both. (If you want to scale to a different percentage of screen width, change max width: 85 to whatever you want the width to be.)

So, below, you'll see a super-huge image with no classes applied. 

The code looks like this:

<img src="https://i.imgur.com/OAOj95y.jpg" alt="Museo de Orsay interior" />

This one has scale.

The code looks like this:

<img class="scale" src="https://i.imgur.com/OAOj95y.jpg" alt="Museo de Orsay interior" />

This one has scale-center.

The code looks like this:

<img class="scale-center" src="https://i.imgur.com/OAOj95y.jpg" alt="Museo de Orsay interior" />

You will not see what your images will actually look like in the rich text editor--it will show them off center and full sized. Hit preview to see if your classes are working they way you expect them to.

Source: <https://commons.wikimedia.org/wiki/File:Vista_interior_del_museo_de_Orsay.jpg> Credit: [Chosovi](https://commons.wikimedia.org/wiki/User:Chosovi)


End file.
